<template>
	<view class="container">

		<view class="user-section">
			<view class="user-info-box">
				<view style="width:40%;height: 150upx;color: white;margin-top: 20upx;">
					<view style="height: 70upx;font-size: 38upx;font-weight: bold;line-height: 40upx;margin-left: 30upx;letter-spacing: 2upx;">
						待支付
					</view>
					<view style="height: 80upx;font-size: 30upx;font-weight: bold;line-height: 40upx;margin-left: 30upx;">
						请尽快支付哦~
					</view>
				</view>
				<view style="width:60%;height: 150upx;margin-top: 10upx;text-align: center;">
					<image src="/static/image/face/qb.png" style="height: 140upx;" mode="heightFix"></image>
				</view>
			</view>
		</view>
		<view class="info-box">
			<view class="info-item">
				<view class="title-box">
					<view class="title-icon">
						<text class="yticon icon-rili" style="font-size: 50upx;"></text>
					</view>
					<view class="title-text">缴费信息</view>
				</view>
				<view class="list-cell">
					<view class="list-cell-item">
						<view class="item-title">缴费月份：</view>
						<view class="item-info">{{payOrder.month}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">应缴金额：</view>
						<view class="item-info">{{"￥"+payableMoney}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">实缴金额：</view>
						<view class="item-info" style="color: red;">{{"￥"+paidMoney}}
							<text class="yticon icon-huifu" style="margin-left: 10upx;color:#000000" @click="changePayMoney"></text>
						</view>
					</view>
				</view>
			</view>

			<view class="info-item">
				<view class="title-box">
					<view class="title-icon">
						<text class="yticon icon-zhanghao" style="font-size: 50upx;"></text>
					</view>
					<view class="title-text">人员信息</view>
				</view>
				<view class="list-cell">
					<view class="list-cell-item">
						<view class="item-title">人员姓名：</view>
						<view class="item-info">{{userInfo.name}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">手机号：</view>
						<view class="item-info">{{userInfo.telNo}}</view>
					</view>
				</view>
			</view>

			<view class="info-item">
				<view class="title-box">
					<view class="title-icon">
						<text class="yticon icon-shouye" style="font-size: 50upx;"></text>
					</view>
					<view class="title-text">订单信息</view>
				</view>
				<view class="list-cell">
					<view class="list-cell-item">
						<view class="item-title">订单编号：</view>
						<view class="item-info">{{payOrder.payMemberId.substring(15,32).toUpperCase()}}</view>
					</view>
					<view class="list-cell-item">
						<view class="item-title">创建时间：</view>
						<view class="item-info">{{payOrder.time}}</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 100upx;"></view>
			<view class="bottom_box">
				<button type="primary" class="button_class" style="background-color: white !important;color: black;" @click="cancelPay">取消</button>
				<button type="primary" class="button_class" style="background-color: #299CF3 !important;color: white;" @click="payMoney">支付(￥{{paidMoney}})</button>
			</view>
			<uni-popup :animation="true" type="center" ref="payMoney">
				<view style="width:600upx;background-color: white;border-radius: 20upx;border:none">
					<view class="popup-top">
						修改金额
					</view>
					<view class="popup-middle">
						<view class="list-cell">
							<view class="list-cell-item">
								<view class="item-title">实缴金额</view>
								<view class="item-info">
									<input type="number" v-model="paidMoney" placeholder="请输入金额" class="picker_class" />
								</view>
							</view>
						</view>
					</view>
					<view class="popup-bottom">
						<button class="cancel-btn" @click="cancelEditPayMoney">取消</button>
						<button class="confirm-btn" @click="confirmEditPayMoney">确认</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				paidMoney: 0,
				payableMoney: 0,
				payId: "",
				userInfo: {},
				payOrder: {},
				appId:""
			}
		},
		onLoad(options) {
			if (options) {
				this.payId = options.payId
			}
			let appId = uni.getStorageSync("appId")
			if(appId){
				this.appId = appId
			}
			
			this.initOrderInfo()
		},

		methods: {
			initOrderInfo() {
				let params = {
					payMemberId: this.payId
				}
				this.$api.request.getPayDetail(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.userInfo = res.body.data.userInfo;
						this.payOrder = res.body.data.vo;
						this.payableMoney = this.payOrder.payable
						this.paidMoney = this.payableMoney
					} else {
						this.$api.msg("获取信息失败")
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url + "?item=" + JSON.stringify(this.myInfo)
				})
			},
			goTo(url) {
				uni.navigateTo({
					url: url + "?item=" + JSON.stringify(this.relationInfo)
				})
			},
			changePayMoney() {
				this.$refs.payMoney.open()
			},
			cancelEditPayMoney() {
				this.$refs.payMoney.close()
				if (this.payableMoney > this.paidMoney) {
					this.paidMoney = this.payableMoney
				}
			},
			confirmEditPayMoney() {
				if (this.payableMoney > this.paidMoney) {
					this.$api.msg("实缴金额不能小于应缴金额！")
					return
				}
				this.$refs.payMoney.close()
			},
			cancelPay() {
				uni.navigateBack()
			},
			payMoney() {
				let params = {
					payMemberId: this.payId,
					userUuid: this.payOrder.userUuid,
					totalFee: this.paidMoney,
					appId:this.appId
				}
				this.$api.request.initWeChatPay(params, (res) => {
					if (res.body.status.statusCode == "0") {
						let data = res.body.data.signatureDTO;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timestamp,
							nonceStr: data.nonceStr,
							package: data.packageStr,
							signType: 'MD5',
							paySign: data.signature,
							success: function(res) {
								uni.navigateBack()
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			}
		}
	}
</script>
<style lang='scss'>
	page {
		background: $page-color-base;
	}

	.user-section {
		width: 100%;
		height: 300upx;
		position: relative;
		background-color: #299CF3;
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
	}

	.user-info-box {
		margin-top: 40upx;
		padding-left: 40upx;
		height: 180upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.info-box {
		width: 100%;
		position: absolute;
		top: 200upx;
	}

	.title-box {
		display: flex;
		flex-direction: row;
	}

	.title-icon {
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.title-text {
		width: calc(100% - 100upx);
		height: 100upx;
		line-height: 100upx;
		border-bottom: 1px dotted #e7ecf5;
		font-size: 32upx;
	}

	.info-item {
		width: calc(100% - 40upx);
		margin: 20upx;
		background-color: white;
		border-radius: 20upx;
		overflow: hidden;
	}


	.list-cell {
		padding: 20upx;

		.list-cell-item {
			height: 90upx;
			line-height: 90upx;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				font-weight: border;
				color: #787684;
				margin-left: 20upx;
			}

			.item-info {
				margin-right: 20upx;
			}
		}
	}

	.bottom_box {
		width: 100%;
		position: fixed;
		z-index: 90;
		bottom: 0upx;
		height: 90upx;
		line-height: 90upx;
		display: flex;
		flex-direction: row;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	.button_class {
		width: 50%;
		height: 90upx;
		line-height: 90upx;
		border-radius: 0 !important;
		border: none !important;
	}

	button::after {
		border-radius: 0 !important;
		border: none !important;
	}

	.picker_class {
		height: 90upx;
		line-height: 90upx;
		font-size: 28upx;
	}

	.popup-top {
		height: 90upx;
		line-height: 90upx;
		font-size: 32upx;
		padding-left: 30upx;
		font-weight: bolder;
		border-bottom: 1px solid #e9eef5;
	}

	.popup-middle {
		padding: 20upx 0upx;
	}

	.popup-bottom {
		display: flex;
		flex-direction: row;
		font-size: 26upx;
	}

	.cancel-btn {
		width: 50%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 0upx;
		border-bottom-left-radius: 20upx;
		background-color: $page-color-base;
		border-color: $page-color-base;
	}

	.confirm-btn {
		width: 50%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 0upx;
		border-bottom-right-radius: 20upx;
		background-color: #1DA3EE;
		color: white
	}
</style>
